<!DOCTYPE html>
<html lang="zh-CN">
@@include('./part/head.html')

<link rel="stylesheet" href="../pkgs/fullpage/css/jquery.fullpage.css">
<!-- build:css css/index.css -->
<link rel="stylesheet" type="text/css" href="./css/index.css">
<!-- endbuild -->
<title>首页</title>
<body>
@@include('./part/header.html')

<div class="sectionWrap" id="fullpage">
	<div class="section section1">
		
		<img src="../img/index/banner-1-1.png" class="section1-a" />
        
	</div>

	<div class="section section2">
		<div class="section2-b">
			<a>分析评级和金融大数据</a>
			<a>财富管理</a>
			<a>家族财富办公室</a>
			<a>投资者教育</a>
			<a>定制化产品设计与服务</a>
		</div>
		<img src="../img/index/banner-2-1.png" class="section2-a" />
	</div>

	<div class="section section3">
		<img src="../img/index/banner-3-1.png" class="section3-a"/>
		<p class="section3-b">我们以客户个性化服务为核心，在充分了解客户需求及风险承受能力的基础上，向客户提供和介绍多元化的资产配置方案。</p>
		<div class="section3-c">
			<span>政信</span>
			<span>定向增发</span>
			<span>股权投资</span>
			<span>资产证券化</span>
			<span>房地产</span>
			<span>对冲基金</span>
			<span>影视</span>
		</div>
	</div>

	<div class="section section4">
		<img src="../img/index/banner-4-1.png" class="section4-a"/>
		<p class="section4-b">我们拥有独立的数据处理系统，<br/>可以通过合作方、自有产品研发追踪等形式，<br/>抓取第一手的实时数据，<br/>构建海棠金融的大数据库体系。</p>
		<div class="section4-c">
			<img src="../img/index/sign-a.png"/>
			<img src="../img/index/sign-b.png"/>
			<img src="../img/index/sign-c.png"/>
		</div>
		<div class="section4-d">
			<img src="../img/index/sign-1.png"/>
			<img src="../img/index/sign-2.png"/>
			<img src="../img/index/sign-3.png"/>
		</div>
	</div>

	<div class="section section5">
		<img src="../img/index/banner-5-1.png" class="section5-a"/>
		<img src="../img/index/banner-5-2.png" class="section5-b"/>
		<img src="../img/index/banner-5-3.png" class="section5-c"/>
		<p class="section5-d">我们用专业为客户提供标准化的全方位金融服务,<br/>并将提升客户自身的金融投资和产品识别能力为己任。</p>
	</div>

	<div class="section section6">
		<div class="section6-wrap">
			<div class="section6-a">
				
				<div>
					<h3>上海总公司</h3>
					<p><a href="linkus.html">上海虹口区武进路190号虹口SOHO20层</a></p>
					<p>电话：021-23561018</p>
					<p>传真：021-23561040</p>
				</div>
			</div>
			<div class="section6-b">
				
				<div>
					<h3>上海分公司</h3>
					<p><a href="linkus.html">上海静安区西藏北路199号光明地产大厦6-8楼</a></p>
					<p>电话：021-23561018</p>
					<p>传真：021-23561040</p>
				</div>
			</div>
			<div class="section6-c">
				
				<div>
					<h3>北京分公司</h3>
					<p><a href="linkus.html">北京市朝阳区东三环北路38号院北京控股集团大厦5层</a></p>
					<p>电话：010-56944944</p>
				</div>
			</div>
		</div>


		<footer class="ht-footer">
			<div class="footer-content">
				<a href="about.html">走进海棠</a>
				<ul>
					<li><a href="product.html">海堂产品</a></li>
					<li><a href="risk.html">海堂风控</a></li>
				</ul>
				<ul>
					<li><a href="dynamic.html">海棠动态</a></li>
					<li><a href="####">热点头条</a></li>
					<li><a href="####">海棠研究</a></li>
					<li><a href="####">媒体报道</a></li>
				</ul>
				<ul>
					<li><a href="report.html">研究报告</a></li>
					<li><a href="####">投资者教育</a></li>
				</ul>
				<a href="duke.html">海棠公爵会</a>
				<a href="job.html">海棠招聘</a>
				<a href="linkus.html">联系我们</a>
				<ul class="qrcode">
					<li>
						<img src="./img/qrcode-micro-service.png">
						<span>海棠金融</span>
					</li>
					<li>
						<img src="./img/qrcode-subscribe.png">
						<span>海棠金融快讯</span>
					</li>
				</ul>
			</div>
			<div class="copyright">金海棠资产管理有限公司 ©版权所有 沪ICP备15031500号-1</div>
		</footer>
	</div>
</div>



@@include('./part/js.html')

<!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<script src="../pkgs/fullpage/js/jquery.easings.min.js"></script>

<script src="./pkgs/fullpage/js/jquery.fullpage.js"></script>

<!-- <script src="./pkgs/slideshow/slideshow.js"></script> -->

<script>
	$(document).ready(function() {

		$.fn.fullpage({

			anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],

			/*-----------进场动画-------------*/
			afterLoad: function(anchorLink, index){
				if(index == 1){
					$('.section1').find('.section1-a').fadeIn(2000);
				}

				if(index == 2){

					$('.section2').find('.section2-a').delay(300).animate({

						marginRight: '170px'

					}, 1500, 'easeOutExpo');

					$('.section2').find('.section2-b').delay(300).animate({

						marginLeft: '-550px'

					}, 1500, 'easeOutExpo');

				}

				if(index == 3){
					$('.section3').find('.section3-a').delay(300).animate({

						marginTop: '0'

					}, 1500, 'easeOutExpo');

					$('.section3').find('.section3-b').delay(500).animate({

						marginTop: '0'

					}, 1500, 'easeOutExpo');

					$('.section3').find('.section3-c').fadeIn(1500);

				}

				if(index == 4){
					$('.section4').find('.section4-a').delay(300).animate({

						marginLeft: '0'

					}, 1500, 'easeOutExpo');

					$('.section4').find('.section4-b').delay(300).animate({

						marginTop: '0'

					}, 1500, 'easeOutExpo');

					$('.section4').find('.section4-c').fadeIn(3000);

					$('.section4').find('.section4-d').fadeIn(3000);

				}

				if(index == 5){

					$('.section5').find('.section5-a').delay(300).animate({

						marginLeft: '0'

					}, 1500, 'easeOutExpo');

					$('.section5').find('.section5-b').delay(300).animate({

						marginTop: '0'

					}, 1500, 'easeOutExpo');

					$('.section5').find('.section5-c').delay(300).animate({

						marginLeft: '0'

					}, 1500, 'easeOutExpo');

					$('.section5').find('.section5-d').delay(800).animate({

						marginLeft: '0'

					}, 1500, 'easeOutExpo');

				}

				if(index == 6){
					 $('.section6').find('.section6-a').delay(300).animate({

						marginBottom: '0'

					}, 1500, 'easeOutExpo');

					 $('.section6').find('.section6-b').delay(500).animate({

						marginBottom: '0'

					}, 1500, 'easeOutExpo');

					 $('.section6').find('.section6-c').delay(700).animate({

						marginBottom: '0'

					}, 1500, 'easeOutExpo');
				}
			},

			/*-----------出场动画-------------*/
			onLeave: function(index, direction){
				if(index == 1){
					$('.section1').find('.section1-a').fadeOut(2000);
				}

				if(index == '2'){

					$('.section2').find('.section2-a').delay(1000).animate({

						marginRight: '100%'

					}, 1500, 'easeOutExpo');

					$('.section2').find('.section2-b').delay(1000).animate({

						marginLeft: '100%'

					}, 1500, 'easeOutExpo');

				}

				if(index == '3'){
					$('.section3').find('.section3-a').delay(1000).animate({

						marginTop: '100%'

					}, 1500, 'easeOutExpo');

					$('.section3').find('.section3-b').delay(1000).animate({

						marginTop: '100%'

					}, 1500, 'easeOutExpo');

					$('.section3').find('.section3-c').fadeOut(1500);

				}

				if(index == '4'){
					$('.section4').find('.section4-a').delay(1000).animate({

						marginLeft: '100%'

					}, 1500, 'easeOutExpo');

					$('.section4').find('.section4-b').delay(1000).animate({

						marginTop: '100%'

					}, 1500, 'easeOutExpo');

					$('.section4').find('.section4-c').fadeOut(1000);

					$('.section4').find('.section4-d').fadeOut(1000);

				}

				if(index == '5'){

					$('.section5').find('.section5-a').delay(1000).animate({

						marginLeft: '-100%'

					}, 1500, 'easeOutExpo');

					$('.section5').find('.section5-b').delay(1000).animate({

						marginTop: '-9999%'

					}, 1500, 'easeOutExpo');

					$('.section5').find('.section5-c').delay(1000).animate({

						marginLeft: '100%'

					}, 1500, 'easeOutExpo');

					$('.section5').find('.section5-d').delay(1000).animate({

						marginLeft: '100%'

					}, 1500, 'easeOutExpo');

				}

				if(index == 6){
					 $('.section6').find('.section6-a').delay(1000).animate({

						marginBottom: '9999px'

					}, 1, 'easeOutExpo');

					 $('.section6').find('.section6-b').delay(1000).animate({

						marginBottom: '9999px'

					}, 1, 'easeOutExpo');

					 $('.section6').find('.section6-c').delay(1000).animate({

						marginBottom: '9999px'

					}, 1, 'easeOutExpo');
				}
			},

			loopBottom: true,

			navigation: true,

		});
	});
</script>

<script>
	$(function(){
		$('.section2').find('.section2-b a').mousemove(function(event) {
			$(this).stop().animate({
				backgroundColor: '#75bff9',
				color: '#fff'
			},300).siblings().stop().animate({
				backgroundColor: '#fff',
				color: '#354d85'
			},300);
		});

		$('.section2').find('.section2-b a').mouseout(function(event) {
			$('.section2').find('.section2-b a').stop().animate({
				backgroundColor: '#fff',
				color: '#354d85'
			},500);
		});

		// $('.section3').find('.section3-c span').mousemove(function(event) {
		// 	$(this).stop().animate({
		// 		color: '#fff'
		// 	},200).siblings().stop().animate({
		// 		color: '#08284d'
		// 	},200);
		// });

		// $('.section3').find('.section3-c span').mouseout(function(event) {
		// 	$(this).stop().animate({
		// 		color: '#08284d'
		// 	},200);
		// });

	});
</script>

</body>
</html>